<template>
    <div>

        <el-descriptions title="群组信息" :column="2" :size="size" border style="margin-top: 20px;">
            <template #title>
                <h1 class="title">群组信息</h1>
            </template>
            <template #extra>
                <el-button type="primary" @click="ugDrawerVisible = true">
                    <el-icon>
                        <Edit />
                    </el-icon>
                    编辑</el-button>
            </template>
            <el-descriptions-item label="ID">
                {{ curUG.id }}
            </el-descriptions-item>
            <el-descriptions-item label="群组名称">
                {{ curUG.title }}
            </el-descriptions-item>
            <el-descriptions-item label="群组简介">
                {{ curUG.desc }}
            </el-descriptions-item>
            <el-descriptions-item label="创建人">
                <div style="display: flex">
                    <el-avatar :size="20" style="margin-right: 4px;"
                        :src="imgBaseURL + curUG?.avatar || ''"></el-avatar>
                    {{ curUG?.nickName }}
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <div style="margin-top: 20px;">
        <div>
            <h1 class="title">组内用户列表</h1>
        </div>
    </div>
    <div>
        <el-row :gutter="8">
            <el-col :span="6" v-for="user in curUG.userInfoList">
                <userCard :user="user" />
            </el-col>
        </el-row>
    </div>
    <div>
        <el-drawer v-model="ugDrawerVisible" direction="rtl">
            <template #header>
                <h4>用户组</h4>
            </template>
            <template #default>
                <div>
                    <el-form v-model="curUG" label-position="top">
                        <el-form-item label="群组名称">
                            <el-input v-model="curUG.title"></el-input>
                        </el-form-item>
                        <el-form-item label="群组简介">
                            <el-input v-model="curUG.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="用户列表">
                            <el-select v-model="curUG.userIdList" multiple placeholder="请选择用户" style="width: 100%">
                                <el-option v-for="user in userList" :key="user.id" :label="user.userName"
                                    :value="'' + user.id" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="ugDrawerVisible = false">取消</el-button>
                    <el-button type="primary" @click="createUG(curUG)">确认</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script>
import userCard from '../../components/userCard.vue'
import { useUserStore } from "../../store/userStore";
import { POST } from '../../util/axios.js'
export default {
    components: { userCard },
    data() {
        return {
            ugDrawerVisible: false,
            ugList: [],
            pagination: {
                curPage: 1,
                pageSize: 10
            },
            userList: [],
            curUG: { title: "", desc: "", id: '' },
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL
        }
    },
    methods: {
        async createUG(ug) {
            this.curUG = ug
            this.ugDrawerVisible = true
            const userStore = useUserStore();
            let rs = await POST('/user/createUG', 'POST', { title: ug?.title, desc: ug?.desc, id: ug?.id, userIdList: ug?.userIdList }, false, null, true)
            // this.ugList = rs.data
            console.log(rs)
            if (rs.code == 200) {
                location.reload();
            }
            console.log("获取用户自己创建的问卷结果:::", rs)
        },
        async getUGByID() {
            let id = this.$route.params?.id || null
            if (id) {
                let rs = await POST('/user/getUGByID', 'POST', { "id": id }, false, null, false)
                if (rs.code == 200) {
                    this.curUG = rs.data
                    console.log("curUG:::", this.curUG)
                }
            }
        },
        async getUserList() {
            let rs = await POST('/user/getUserList', 'POST', {}, false, null, false)
            if (rs.code == 200) {
                this.userList = rs.data
                console.log("userList:::", this.userList)
            }

        }
    },
    mounted() {
        this.getUGByID()
        this.getUserList()
    }
}
</script>
<style></style>